<template >
  <div class="container">
    <div class="cartBox">
      <van-nav-bar title="购物车" :right-text="'管理'" />

      <main>
        <van-checkbox-group v-model="result" ref="checkboxGroup">
          <van-card
            v-for="item in cartList"
            :price="item.price"
            :desc="item.name" 
            :thumb="item.bgUrl"
            :key="item.id"
             
          >
            <template #thumb>
              <van-checkbox checked-color="#ee0a24" :name="item.id" />
              <img  class="cart-img" :src="item.bgUrl" @click="toDetail(item.type)" />
            </template>
            <template #footer>
              <van-button
                class="my-num-btn"
                size="mini"
                @click="numMinus(item.id, item.count)"
                >-</van-button
              >
              {{ item.count }}
              <van-button
                class="my-num-text"
                size="mini"
                @click="numPlus(item.id, item.count)"
                >+</van-button
              >
            </template>
          </van-card>
        </van-checkbox-group>
      </main>
      <van-submit-bar :price="amount * 100" button-text="结算">
        <van-checkbox
          checked-color="#ee0a24"
          @click="myClickEvt"
          v-model="checked"
          >全选</van-checkbox
        >
      </van-submit-bar>
    </div>
  </div>
</template>

<script>
import { cartListApi, cartModifyApi } from "../../apis/cartApis";


export default {
  data() {
    return {
      amount: 0.0,
      count: 1,
      checked: false,
      cartList: [],
      result: [],
      newCount: [],
      userInfo: [],
    };
  },
  watch: {
    result: {
      deep: true,
      handler(val) {
        this.checked = val.length === this.cartList.length;
        this.amount = this.cartList.reduce((_total, it) => {
          if (val.includes(it.id)) _total += it.price * it.count;
          return _total;
        }, 0);
      },
    },
  },
  // computed: {
  //   userInfo() {
  //     return this.$store.getters["common/userInfo"];
  //   },
  // },
  async created() {
    this.userInfo = this.$store.getters["common/userInfo"];
    await this.getCartList();
  },
   methods: {
    getCartList() {
      cartListApi(this.userInfo.id).then((d) => {
        console.log(d);
        this.cartList = d.data.map((it) => {
          it.checked = false;
          return it;
        });
      });
    },
   //数量减
    async numMinus(id, count) {
      await cartModifyApi({ userId: this.userInfo.id, id, count: count - 1 });
      this.getCartList();
       
      
    },
    //数量加
    async numPlus(id, count) {
      await cartModifyApi({ userId: this.userInfo.id, id, count: count + 1 });
      this.getCartList();
      
       
      
    },
    
    myClickEvt() {
      if (this.checked) {
        this.result = this.cartList.map((it) => {
          return it.id;
        });
      } else {
        this.result = [];
      }
    },
    //跳转详情页
    toDetail() {
      
      // this.getList();
      this.$router.push("/details?type=" + '休闲食品');
    },
  },
};
</script>

<style lang="less" scoped>
.van-submit-bar__bar {
  height: 40px;
  padding: 0 0 0 16px;
}
.van-submit-bar {
  bottom: 51px;

  // border-bottom: 1px solid gray;
  button {
    height: 40px;
    border-radius: 0%;
    background: #fa1919;
  }
}
.cartBox {
  position: relative;
  height: calc(100% - 90px);
  > main {
    display: block;
    position: relative;
    height: calc(100% - 46px);
    overflow-x: hidden;
    padding: 8px;
  }
}
.van-nav-bar__text {
  color: #fa1919;
}
.van-card__price {
  color: #fa1919;
}

.my-num-btn {
  height: 26px;
  width: 26px;
  vertical-align: middle;
  margin-right: 10px;
}
.my-num-text {
  display: inline-block;
  height: 26px;
  width: 26px;
  vertical-align: middle;
  font-size: 0.8rem;
  margin-left: 10px;
}
.van-card__thumb {
  display: flex;
  width: 115px;
  .van-checkbox {
    flex: none;
    margin-right: 10px;
  }
}
.cart-img {
  display: block;
  width: 70px;
  height: 100%;
}
</style>
